

<template>
    <div class="storeInfo">
        <div class="head">
            <el-form :model="form" class="headForm">
                <el-form-item>
                    <el-select clearable v-model="form.category_id" placeholder="商品分类">
                        <el-option v-for="item in catelist" :key="item.category_id" :label="item.cate_name" :value="item.category_id"></el-option>
                    </el-select>
                </el-form-item>  
                <el-form-item>
                    <el-input placeholder="商品名称" v-model="form.product_name"></el-input>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="success" @click="theClick('add')">添加</el-button>


            </el-form>
            
        </div>
        <!-- <p style="line-height:30px;padding-left:20px;margin-top:8px;color:#333" v-if="form.order_id == ''">最近{{total}}笔人工退款订单记录</p> -->
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" >
                <!--产品ID	商品图	名称	规格	单位	条形码	分类	建议售价	关键词	操作				 -->
                <el-table-column prop="product_id" label="产品ID" fixed ></el-table-column>
                <el-table-column prop="" label="商品图">
                    <template slot-scope="scope">
                        <img :src="scope.row.product_image+'?x-oss-process=image/resize,m_fill,w_50,h_50/quality,q_50'" alt="" style="width:50px;height:50px">                        
                    </template>
                </el-table-column>
                <el-table-column prop="product_name" label="名称" > </el-table-column>
                <el-table-column prop="spec" label="规格" ></el-table-column>

                  
                <el-table-column prop="unit" label="单位" ></el-table-column>
                <el-table-column prop="barcode" label="条形码">
                    <template slot-scope="scope">
                        <p v-if="scope.row.barcode == ''">--</p>
                        <p v-else>{{scope.row.barcode}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="category_name" label="分类"></el-table-column>
                <el-table-column prop="sale_price" label="建议售价"></el-table-column>
                <el-table-column prop="keywords" label="关键词"></el-table-column>
                <el-table-column prop="" label="操作" v-if="limitList.length != 0">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                </el-table-column>
                <el-table-column v-else label="操作">/</el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>

        <el-dialog :title="editTitle" :visible.sync="add_edit_show" class="business">
            <el-form ref="form" :model="editForm" label-width="120px">
                <el-form-item label="分类">
                    <el-select clearable v-model="editForm.category_id">
                        <el-option v-for="item in catelist" :key="item.category_id" :label="item.cate_name" :value="item.category_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="editForm.product_name"></el-input>                    
                </el-form-item>
                <upload spantxt="商品图" :coverPath="editForm.product_image" :coverImg="editForm.product_image_show+'?x-oss-process=image/resize,m_fill,w_150,h_100/quality,q_50'" v-on:throwFilePath="getval"></upload><br>
                <upload spantxt="LED图" :coverPath="editForm.led_image" :coverImg="editForm.led_image_show+'?x-oss-process=image/resize,m_fill,w_150,h_100/quality,q_50'" v-on:throwFilePath="getval2"></upload><br>
                <upload spantxt="LED小比例图" :coverPath="editForm.led_min_image" :coverImg="editForm.led_min_image_show+'?x-oss-process=image/resize,m_fill,w_150,h_100/quality,q_50'" v-on:throwFilePath="getval3"></upload><br>
                <upload spantxt="LED杯子图片" :coverPath="editForm.wine_glass_image" :coverImg="editForm.wine_glass_image_show+'?x-oss-process=image/resize,m_fill,w_150,h_100/quality,q_50'" v-on:throwFilePath="getval4"></upload><br>
                <upload spantxt="打赏大屏幕图" :coverPath="editForm.reward_image" :coverImg="editForm.reward_image_show+'?x-oss-process=image/resize,m_fill,w_150,h_100/quality,q_50'" v-on:throwFilePath="getval5"></upload><br>
                <el-form-item label="未开封储存天数">
                    <el-input v-model="editForm.deposit_day"></el-input>
                </el-form-item>
                <el-form-item label="已开封储存天数">
                    <el-input v-model="editForm.open_deposit_day"></el-input>
                </el-form-item>
                <el-form-item label="规格">
                    <el-input v-model="editForm.spec"></el-input>
                </el-form-item>
                <el-form-item label="单位">
                    <el-input v-model="editForm.unit"></el-input>
                </el-form-item>
                <el-form-item label="条形码">
                    <el-input v-model="editForm.barcode"></el-input>
                </el-form-item>
                <el-form-item label="建议售价">
                    <el-input v-model="editForm.sale_price"></el-input>
                </el-form-item>
                <el-form-item label="关联材料">
                    <el-radio v-model="editForm.is_process" label="1">是</el-radio>
                    <el-radio v-model="editForm.is_process" label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="凑单商品">
                    <el-radio v-model="editForm.is_add_order" label="1">是</el-radio>
                    <el-radio v-model="editForm.is_add_order" label="0">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="confrim">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss">
.supplier{
        .el-dialog{
            .el-dialog__body{
                min-height: 300px;

            }
        } 
    }
  .tabContainer_SI{
      .el-table{
          .cell{
              text-align: center;
          }
      }
  }
</style>

<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import upload from '../../pop/upload.vue'

export default {
    components:{
        upload
    },
    data () {
    return {
        tableData:[],
        total:50,
        size:20,
        form:{size:20,
            page:1
        },
        pageNum:1,
        limitList:[
            {name:"编辑",url:"edit"},
            {name:"删除",url:"del"},
        ],
        editTitle:"",
        add_edit_show:false,
        editForm:{renew_time:''},
        catelist:[],

    }
  }, 
   mounted(){
      let that = this;
      that.getList();
      abc.get(that,potUrl.categoryList,{},res=>{
          that.catelist = res.data
      })
  },
  methods:{
    search(){
        let that = this;
        console.log(that.timerange)
        if(that.timerange.length > 0){
            that.form.start_time  = that.timerange[0]
            that.form.end_time  = that.timerange[1]
        }
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.productindex,that.form,(res)=>{
            that.tableData=res.data.list;
            that.total = res.data.total;
        })//列表
    },
    confrim(a){
        const that = this;
        that.add_edit_show = false;
        let url = ''
        if(that.editTitle == '添加'){
            url = potUrl.productadd
        }else{
            url = potUrl.productedit
        }
        abc.post(that,url,that.editForm,(res)=>{
            that.getList()
        })
    },
    theClick(a,b){
        const that = this;
        
        if(a == 'del'){
            abc.twoTips(that,potUrl.productdel,'确定要删除此商品信息？',{product_id:b.product_id},res=>{
                that.getList()
            })
        }else{
            that.add_edit_show = true;
            if(a == 'add'){
                that.editTitle = '添加'
                that.editForm = {}
            }else{
                that.editTitle = '编辑';
                abc.get(that,potUrl.productdetail,{product_id:b.product_id},res=>{
                    that.editForm = res.data
                })
            }

        }
    },
    getval(data){
        const that = this;
        that.editForm.product_image = data
    },
    getval2(data){
        const that = this;
        that.editForm.led_image = data
    },
    getval3(data){
        const that = this;
        that.editForm.led_min_image = data
    },
    getval4(data){
        const that = this;
        that.editForm.wine_glass_image = data
    },
    getval5(data){
        const that = this;
        that.editForm.reward_image = data
    },

  }
}
</script>
